<template>
  <div>
    <div class="tools-div">
      <el-button
        type="success"
        size="small"
        @click="handleShowSaveMenuDialog(0)"
      >
        添 加
      </el-button>
    </div>

    <el-table
      :data="list"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
    >
      <el-table-column prop="title" label="菜单标题" />
      <el-table-column prop="component" label="路由名称" />
      <el-table-column prop="sortValue" label="排序" />
      <el-table-column prop="status" label="状态" #default="scope">
        {{ scope.row.status == 1 ? '正常' : '停用' }}
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column label="操作" align="center" width="280" #default="scope">
        <el-button
          type="success"
          size="small"
          @click="handleShowSaveMenuDialog(scope.row.id)"
        >
          添加下级节点
        </el-button>
        <el-button
          type="primary"
          size="small"
          @click="handleShowEditMenuDialog(scope.row)"
        >
          修改
        </el-button>
        <el-button type="danger" size="small" @click="handleDelMenu(scope.row)">
          删除
        </el-button>
      </el-table-column>
    </el-table>
    <!-- 新增/更新菜单的对话框 -->
    <div>
      <el-dialog v-model="dialogVisible" :title="dialogTitle" width="30%">
        <el-form label-width="120px">
          <el-form-item label="菜单标题">
            <el-input v-model="sysMenu.title" />
          </el-form-item>
          <el-form-item label="路由名称">
            <el-input v-model="sysMenu.component" />
          </el-form-item>
          <el-form-item label="排序">
            <el-input v-model="sysMenu.sortValue" />
          </el-form-item>
          <el-form-item label="状态">
            <el-radio-group v-model="sysMenu.status">
              <el-radio :label="1">正常</el-radio>
              <el-radio :label="0">停用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSaveOrUpdateMenu">
              提交
            </el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import {
  listMenus,
  DeleteById,
  Save,
  GetById,
  UpdateById as UpdateMenuById,
} from '@/api/sysMenu'
import { ElMessage, ElMessageBox } from 'element-plus'
// 定义表格数据模型
const list = ref([])
//对话框
let dialogVisible = ref(false)
let dialogTitle = ref('新增菜单')
const sysMenu = ref({
  status: 1,
})
//当页面渲染时 发起异步请求加载菜单列表
onMounted(() => {
  fetchData()
})

//编辑按钮事件函数： 回显要编辑的菜单 弹出对话框
const handleShowEditMenuDialog = async row => {
  const { data } = await GetById(row.id)
  sysMenu.value = data
  //修改对话框标题
  dialogTitle.value = '更新菜单'
  //弹出对话框
  dialogVisible.value = true
}
//删除按钮事件函数
const handleDelMenu = row => {
  ElMessageBox.confirm(
    `proxy will permanently delete the 【${row.title}】. Continue?`,
    'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  )
    .then(async () => {
      const { code, message } = await DeleteById(row.id)
      if (+code === 200) {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        //刷新页面
        fetchData()
      } else {
        //删除失败的提示： 例如 还有下一级节点 不能直接删除
        ElMessage.warning(message)
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}
//添加菜单按钮事件函数:弹出对话框
const handleShowSaveMenuDialog = parentId => {
  //修改对话框标题
  dialogTitle.value = '新增菜单'
  console.log('handleShowSaveMenuDialog:', parentId)
  sysMenu.value = { status: 1 }
  //接收传入的要新增的菜单的父id给sysMenu
  sysMenu.value.parentId = parentId
  //弹出对话框
  dialogVisible.value = true
}
//新增或者更新菜单按钮事件函数
const handleSaveOrUpdateMenu = () => {
  if (sysMenu.value.id) {
    //更新
    handleUpdateMenu()
  } else {
    //新增
    handleSaveMenu()
  }
}
//更新菜单
const handleUpdateMenu = async () => {
  console.log(sysMenu.value)
  await UpdateMenuById(sysMenu.value)
  //更新成功：刷新页面 关闭对话框
  ElMessage.success('更新成功')
  fetchData()
  dialogVisible.value = false
}
//新增菜单
const handleSaveMenu = async () => {
  //打印要提交保存的菜单
  console.log(sysMenu.value)
  await Save(sysMenu.value)
  //提示并刷新页面
  ElMessage.success('新增成功')
  //关闭对话框
  dialogVisible.value = false
  fetchData()
}

//查询菜单列表的函数
const fetchData = async () => {
  const { data } = await listMenus()
  list.value = data
}
</script>

<style scoped>
.search-div {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
.tools-div {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}
</style>
